<template>
<div id="footer" class="footer" v-show="show">
  <mu-flexbox justify="space-between">
    <mu-flexbox-item class="center">
      <router-link to="/index">
        <i class="w-icon inline-block" :class="[activePath === '/index' ? 'w-icon-home2' : 'w-icon-home']"></i>
        <div>首页</div>
      </router-link>
    </mu-flexbox-item>
    <mu-flexbox-item class="center">
      <router-link to="/message">
        <i class="w-icon inline-block" :class="[activePath === '/message' ? 'w-icon-message2' : 'w-icon-message']"></i>
        <div>服务</div>
      </router-link>
    </mu-flexbox-item> 
    <mu-flexbox-item class="center">
      <router-link to="/setting">
        <i class="w-icon inline-block" :class="[activePath === '/setting' ? 'w-icon-wode2' : 'w-icon-wode']"></i>
        <div>我的</div>
      </router-link>
    </mu-flexbox-item>
  </mu-flexbox>
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState({
      show: state => state.footer.show
    }),
    activePath () {
      return this.$route.path
    }
  }
}
</script>
<style lang="less" scoped>
@import '../common/css/vars.less';
.footer {
  box-shadow: 0 0 2px rgba(0, 0, 0, .06);
  a{
    padding: 4px 0;
    display: block;
    color: #666;
    &.router-link-active{
      color: @color-primary;
    }
  }
}
</style>

